<template>
  <div class="layout-main">
    <img
      class="layout-banner"
      style="height: 300px"
      src="../assets/images/bg1.jpg"
      alt=""
    />
    <div class="article-list">
      <div v-for="item in 8" class="article-list--item">
        <div class="time-wrapper">
          <span>15</span>
          <span>2024-04</span>
        </div>

        <div class="article-content">
          <p>电容触摸一体机机常见故障</p>
          <p>
            答：电容触摸一体机机黑屏解决方法是首先插上电源后，看后面开关键旁的指示灯亮或不亮，若指示灯不亮，检查电源适配器上的指示灯亮不亮，不亮证明无电源输入，若灯闪亮，证明这台屏内部电路有转路现象,前面检查无异，后面指示灯不亮时，可能出现问题
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({});
</script>
<style lang="scss" scoped>
.layout-main {
  width: 100%;
}

h3 {
  margin-top: 70px;
  font-size: 34px;
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
}
.article-list {
  margin-top: 60px;
  margin-left: 200px;
  width: calc(100% - 400px);
  .article-list--item {
    display: flex;
    padding-top: 34px;
    padding-bottom: 34px;
    border-bottom: 1px solid #efefef;
    align-items: center;
    .time-wrapper {
      background: hsla(0, 0%, 80%, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100px;
      width: 100px;
      span:nth-of-type(1) {
        color: #626971;
        font-size: 20px;
      }

      span:nth-of-type(2) {
        font-size: 14px;
        color: #626971;
      }
    }

    .article-content {
      width: calc(100% - 100px);
      margin-left: 32px;
      p:nth-of-type(1) {
        line-height: 34px;
        color: #333;
        &:hover {
          color: $primary;
        }
      }

      p:nth-of-type(2) {
        margin-top: 20px;
        color: #666;
        font-size: 14px;
      }
    }
  }
}
</style>
